<template>
  <div class="personal">
    <h3>个人设置</h3>
    <div class="personalcon">
      <div class="personalDetail">
        <div class="personalitem">
          <div class="lable">头像:</div>
          <div class="center">
            <img :src="userInfo.imgUrl " alt="" class="tximg" />
          </div>
          <div class="editbtn" @click="edit(0, '头像')">编辑</div>
        </div>
        <div class="personalitem">
          <div class="lable">姓名:</div>
          <div class="center">{{ userInfo.userName }}</div>
          <div class="editbtn" @click="edit(1, '姓名')">编辑</div>
        </div>
        <div class="personalitem">
          <div class="lable">账户身份:</div>
          <div class="center">{{ userInfo.userType }}</div>
        </div>
        <div class="personalitem">
          <div class="lable">校区名称:</div>
          <div class="center">{{ userInfo.university }}</div>
        </div>
        <div class="personalitem">
          <div class="lable">学院信息:</div>
          <div class="center">{{ userInfo.college }}</div>
        </div>
        <div class="personalitem">
          <div class="lable">联系电话:</div>
          <div class="center">{{ userInfo.phone }}</div>
        </div>
        <div class="personalitem">
          <div class="lable">登陆密码:</div>
          <div class="center">
            <input class="pwd" type="password" readonly v-model="userInfo.password" autocomplete="off" />
          </div>
          <div class="editbtn" @click="edit(2, '密码')">修改密码</div>
        </div>
        <div class="personalitem2">
          <el-button type="primary" @click="submit">保存提交</el-button>
        </div>
      </div>
    </div>
    <!--修改头像 修改姓名 修改密码 -->
    <el-dialog
      :title="`修改${title}`"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-upload
        v-if="num == 0"
        class="avatar-uploader"
        action="https://follwup-test.cmas2020.cn/managementSystem/user/uploadDiaryImg"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
      <!--        action="https://follwup-test.cmas2020.cn/managementSystem/user/uploadDiaryImg"-->
        <div class="avatarCon">
          <img :src="userInfo.imgUrl || oriImg" class="avatar" />
        </div>
        <el-button class="upload avatar-uploader-icon">上传</el-button>
      </el-upload>
      <el-input v-else-if="num == 1" v-model="newName" :placeholder="`请输入修改${placeholderTxt}`"></el-input>
      <el-input v-else v-model="newPass" :placeholder="`请输入修改${placeholderTxt}`"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure"
        >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "personalSettings",
        data() {
            return {
                dialogVisible: false,
                dialogVisible2: false,
                dialogVisible3: false,
                userInfo: {
                    userName: "admin",
                    password: "*******",
                    imgUrl: "",
                    university: "XXXXXX大学",
                    phone: "18888888888",
                    userType: "超级管理员"
                },
                oriImg:"https://easycampus-ops.oss-cn-shenzhen.aliyuncs.com/ef1c5af8d1c34582a5bcda0d48ef9437.png",
                newName: "",
                newPass: "",
                // newImg: "",
                placeholderTxt:"",
                title:"",
                num: 1,
                url: "managementSystem/user/",
                imgUrl:'http://119.3.234.22:8013/img/personImg/'
            };
        },
        created() {
            this.personalInfo();
        },
        methods: {
            personalInfo() {
                this.$axios.post(this.url + "personalInfo").then((res) => {
                    if (res.data.errorCode === 200) {
                        let { img, name, password, phone, university, userType,college } = res.data.data
                        this.userInfo.userName = name
                        this.userInfo.password = password
                        this.userInfo.phone = phone
                        this.userInfo.university = university
                        this.userInfo.userType = userType
                        this.userInfo.imgUrl = img
                        this.userInfo.college = college
                        console.log(JSON.parse(window.sessionStorage.getItem('userInfo')))
                    }
                });
            },
            edit(num,val) {
                this.title = val
                this.num = num
                this.placeholderTxt = val
                this.dialogVisible = true;
            },
            sure(){
                if (this.num == 0) {
                    // this.userInfo.imgUrl = this.newImg;
                }
                else if(this.num == 1){
                    this.userInfo.userName = this.newName
                }else {
                    this.userInfo.password = this.newPass
                }
                this.dialogVisible = false;
            },
            submit() {
                let { imgUrl, userName, password } = this.userInfo
                this.$axios.post(this.url + "personalInfoEdit", { imgUrl, userName, password }).then((res) => {
                    let {errorCode, errorMsg } = res.data
                    if (errorCode === 200) {
                        this.personalInfo();
                        window.sessionStorage.setItem("userName", userName);
                        window.sessionStorage.setItem("imageUrl", imgUrl);
                        this.GLOBAL.sysUserAvatar=imgUrl;
                        this.GLOBAL.sysUserName=userName;
                        console.log("sessionId:"+window.sessionStorage.getItem("sessionId"))
                        console.log("userName:"+window.sessionStorage.getItem("userName"))
                        console.log("imageUrl:"+window.sessionStorage.getItem("imageUrl"))
                        console.log("userType:"+window.sessionStorage.getItem("userType"))
                        console.log("limit:"+ window.sessionStorage.getItem("limit"))
                        this.$message({
                            type: "success",
                            message: errorMsg,
                        });
                    } else{
                        this.$message({
                            type: "error",
                            message: errorMsg,
                        });
                    }
                })
            },
            handleAvatarSuccess(res, file) {
                console.log(res, file)
                let { imgUrl,errorCode, errorMsg } = res
                if (errorCode === 200) {
                    this.$message({
                        type: "success",
                        message: errorMsg,
                    });
                    this.userInfo.imgUrl =imgUrl;
                } else{
                    this.$message({
                        type: "error",
                        message: errorMsg,
                    });
                }
            },
            beforeAvatarUpload(file) {
                const isJPG =
                    file.type === "image/jpg" ||
                    file.type === "image/jpeg" ||
                    file.type === "image/png";
                const isLt2M = file.size / 5024 / 5024 < 5;

                if (!isJPG) {
                    this.$message.error("上传头像图片只能是 JPG 格式!");
                }
                if (!isLt2M) {
                    this.$message.error("上传头像图片大小不能超过 5MB!");
                }
                console.log(isJPG && isLt2M)
                return isJPG && isLt2M;
            },
        },
    };
</script>

<style lang="scss" scoped>
  .personalcon {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .personalitem {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-top: 50px;
  }
  .personalitem2 {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
  .tximg {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }

  .editbtn {
    color: #00b7a1;
  }
  .logoimg {
    width: 200px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .lable {
    width: 200px;
  }
  .center {
    width: 300px;
  }
  .upload {
    /* background-color: #52B2E2; */
    color: #000;
    margin-top: 146px;
    margin-left: -51px;
    width: 108px;
  }
  .avatarCon {
    width: 50px;
    height: 50px;
    background-color: gray;
    margin-top: 52px;
    margin-left: 90px;
    border-radius: 50px;
    float: left;
    display: inline-block;
    position: relative;
  }
  .avatar {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    border-radius: 50px;
  }
  .pwd{
    border: 0;
    outline:none
  }

</style>

